
<template>
    <div class="container block">
        <div class="header">
            <div class="row">
                <!-- <el-date-picker
                    class="month-picker"
                    v-model="month"
                    type="month"
                    format="YYYY-MM月账单"
                    value-format="YYYY-MM"
                    @change="onMonth"
                /> -->
                <el-date-picker
                        v-model="month"
                        type="daterange"
                        class="month-picker"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        @change="onMonth"
                    />
            </div>
            <div class="row">
                <div class="basic-box">
                    <div class="basic-title">当前时间共发（元）</div>
                    <div class="basic-num">
                        ¥<span class="num">{{ allMoney }}</span>
                    </div>
                </div>
                <div class="basic-box">
                    <div class="basic-title">当前时间已领（元）</div>
                    <div class="basic-num">
                        ¥<span class="num">{{ alrMoney }}</span>
                    </div>
                </div>
                <div class="basic-box">
                    <div class="basic-title">当前时间未领（元）</div>
                    <div class="basic-num">
                        ¥<span class="num">{{ waitMoney }}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="search">
                    <input
                        type="text"
                        placeholder="请输入派遣单位名称"
                        class="input search-input"
                        v-model="searchText"
                        @keydown.enter="search"
                    />
                    <button class="btn" @click="search">搜索</button>
                    <button class="btn-white" @click="onReset">重置</button>
                </div>
                <div class="detail">
<!--                    <button class="btn-green download-btn" @click="onExport">-->
<!--                        <i class="el-icon el-icon-download" />-->
<!--                        导出excel-->
<!--                    </button>-->
                    <export-button type="success" @export="onExport">导出excel</export-button>
                </div>
            </div>
        </div>
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }"
            >
                <el-table-column
                    width="300"
                    prop="serveCompanyName"
                    label="派遣单位名"
                />
                <el-table-column
                    prop="sex"
                    label="发薪金额"
                    :formatter="(row:{payTotalMoney:string}) => row.payTotalMoney + '元'"
                />
                <el-table-column
                    prop="phone"
                    label="已领金额"
                    :formatter="(row:{payReceiveTotalMoney:string}) => row.payReceiveTotalMoney + '元'"
                />
                <el-table-column
                    prop="idCardNo"
                    label="未领金额"
                    :formatter="(row:{payUnclaimedTotalMoney:string}) => row.payUnclaimedTotalMoney + '元'"
                />
                <el-table-column label="操作">
                    <template #default="scope">
                        <p
                            class="link"
                            @click="goDetail(scope.row.serveCompanyId)"
                        >
                            查看详情
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>

    <!-- <el-image-viewer
        hide-on-click-modal
    /> -->
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'
import { getBillList, getBillInfo, BillDto } from '@/api/bill'
import { exportBill } from '@/api/export'
import { dateFormat, shake, downLoadFile } from '@/utils/util'
import store from '@/store/index'
export default defineComponent({
    // 输出默认定义组件
    name: 'Bill',
    data () {
        return {
            pageSize: 10, // 每页显示十条
            pageNum: 1, // 页数为1
            total: 0, // 总的为0
            tableData: [] as BillDto[], // 如同BillDto的数据
            searchText: '', // 搜索文本为空
            searchValue: '', // 搜索值默认为空
            month: [] as string[] | string,
            allMoney: 0,
            alrMoney: 0,
            waitMoney: 0 // 等待的钱数为0
        }
    },
    created () { // 创建
        const year = new Date().getFullYear() // 一年等于一整年
        const month = new Date().getMonth() // 获得月
        const firstDay = new Date(year, month, 1) // 第一天就等于传入 年，月，1
        console.log(firstDay, '本月第一天')
        this.month = [dateFormat('YYY-mm-dd', new Date(firstDay)), dateFormat('YYYY-mm-dd', new Date())]// 日期格式
        this.onMonth()
    },
    methods: {
        async onMonth () {
            const startTime = this.month ? new Date(this.month[0]).getTime() : 0 // 开始时间 这个月可选择这个月第一个，到这个月第二个比上0
            const endTime = this.month ? new Date(this.month[1]).getTime() : 0
            if (endTime - startTime > 5184000000) { // 如果开始时间减去结束大于5184000000秒
                this.$message.warning('最多只能选择61天！')
                this.month = '' // 这个月设置为空  返回
                return
            }
            if (startTime === 0) { // 如果开始时间等于0  返回
                return
            }
            if (!this.month) { // 如果不等于月   请选择时间范围  await是放在=右边
                this.$message.warning('请选择时间范围')
                return
            }
            this.pageNum = 1
            this.handleCurrentChange() // 控制当前变化
            const result = await getBillInfo({
                startTime: this.month ? this.month[0] : '',
                endTime: this.month ? this.month[1] : ''
            })
            this.allMoney = result.allMoney // this 全部的钱就结果全部的钱  赋值
            this.alrMoney = result.alrMoney
            this.waitMoney = result.waitMoney
        },
        handleCurrentChange () {
            if (!this.month) {
                this.$message.warning('请选择时间范围')
                return
            }
            getBillList({
                pageNum: this.pageNum, // 这个页数就等于这个页数
                pageSize: this.pageSize,
                searchText: this.searchValue,
                startTime: this.month ? this.month[0] : '',
                endTime: this.month ? this.month[1] : ''
            }).then(res => {
                this.total = res.total // 全部的资源文件
                this.tableData = res.list
            })
        },
        search () {
            if (!this.month) {
                this.$message.warning('请选择时间范围')
                return
            }
            this.searchValue = this.searchText // 如果搜索的值等于搜索的文本
            this.pageNum = 1 // 页数就等于1
            this.handleCurrentChange()
        },
        onReset () {
            this.searchText = ''
            this.search()
        },
        handleSizeChange () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        async onExport () {
            if (!this.month) {
                this.$message.warning('请选择时间范围')
                return
            }
            const result = await exportBill({
                serveCompanyName: this.searchValue,
                startTime: this.month ? this.month[0] : '',
                endTime: this.month ? this.month[1] : ''
            }, {
                loading: true
            })
            console.log(result, 'result')
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                // window.location.href = result.fileUrl
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
                // this.$message.success('导出成功！')
            }
        },
        goDetail (id:string) {
            console.log(this.month)
            if (!this.month) {
                this.$message.warning('请选择时间范围')
                return
            }
            this.$router.push({
                path:
                        '/bill/detail/' +
                         id +
                        '/' +
                        this.month
            })
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.header{
    flex-direction column
}
:deep() .month-picker
    position relative
    top -10px
    left 0
    margin-top -10px
    font-size 15px
:deep() .el-input--prefix .el-input__inner
    padding-right 0
    background white
    border unset
    position relative

.basic-box
    width 346px
    height 98px
    margin-bottom 20px
    background #F7F8FC
    border-radius 8px
    flex-center()
    flex-direction column
    align-items center
    .basic-title
        color color-grey
    .basic-num
        margin-top 14px
        font-style italic
        font-weight 800
        .num
            margin-left 4px
            font-size font-normal
</style>
